<!--
 * @Description: 今日生产计划
 * @Author: lwx
 * @Date: 2022-08-19 11:13:51
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-12 09:48:35
-->
<template>
   <div class="product_plan">
      <div>
         <h4><count-to :start-val="0" :end-val="amount" :duration="3200" /></h4>
         <span class="crirle skyBlue"></span><span class="text">计划数量</span>
      </div>
      <div>
         <h4><count-to :start-val="0" :end-val="number" :duration="3200" /></h4>
         <span class="crirle cyan"></span><span class="text">完工数量</span>
      </div>
      <div>
         <h4><count-to :start-val="0" :end-val="remain" :duration="3200" /></h4>
         <span class="crirle bgRed"></span><span class="text">待产数量</span>
      </div>
   </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { timerMixins } from '@/common/mixins/timerMixins.js'
import { dailyOutput } from '@/api/dashboard.js'
export default {
   mixins: [timerMixins],
   components: {
      CountTo
   },
   data() {
      return {
         amount: 0,//计划数量
         number: 0,//完工数量
         remain: 0,
      }
   },
   methods: {
      async initData() {
         const { data } = await dailyOutput()
         this.amount = data.amount
         this.number = data.number
         this.remain = this.amount - this.number
      }
   }
}
</script>
<style lang='scss' scoped>
.product_plan{
    display: flex;
    color: #4380f0;
    justify-content: space-around;
    h4{
      font-size: .4rem;
      color: #17caf0;;
      margin: 0.3rem;
      font-weight: normal;
      text-align: center;
      background-image: linear-gradient(to top, #072468, #030a37);
    }
}
</style>